import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Router } from 'react-router-dom';
import history from 'src/history';
import RouterComponent from 'src/router';

// render(
// 	<BrowserRouter>
// 		<App/>
// 	</BrowserRouter>
// 	,document.getElementById('app')
// )

render(
	<Router history={history}>
		<RouterComponent/>
	</Router>
	,document.getElementById('app')
)

/**
 * react 官方维护两个版本的路由v2.0+、v4.0+
 * 2.0+的：react-router
 * 4.0+的：react-router-dom
 * 
 * react-router-dom包含react-router同时又添加了四个不同的组建
 * <BrowserRouter>, <HashRouter>, <MemoryRouter>, <StaticRouter>
 * 
 * <MemoryRouter>组件在内存中保存“URL”信息，不会修改浏览器的地址栏，往往用于React Native或测试环境等非浏览器环境；
 * <StaticRouter>组件从名字能看出它从不修改路由，这在服务器端渲染时很有用。
 * <HashRouter>组件是哈希方式来实现的组建，哈希方式会带有“#”，在调用微信支付的时候url里有#会失败。
 *
 * 一般我们会使用<BrowserRouter>
 * 
 <BrowserRouter>

一个使用了 HTML5 history API 的高阶路由组件，保证你的 UI 界面和 URL 保持同步。此组件拥有以下属性：

basename: string
作用：为所有位置添加一个基准URL
使用场景：假如你需要把页面部署到服务器的二级目录，你可以使用 basename 设置到此目录。

<BrowserRouter basename="/minooo" />
<Link to="/react" /> // 最终渲染为 <a href="/minooo/react">

getUserConfirmation: func
作用：导航到此页面前执行的函数，默认使用 window.confirm
使用场景：当需要用户进入页面前执行什么操作时可用，不过一般用到的不多。

const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation('Are you sure?', yourCallBack)} />

forceRefresh: bool
作用：当浏览器不支持 HTML5 的 history API 时强制刷新页面。
使用场景：同上。

const supportsHistory = 'pushState' in window.history

<BrowserRouter forceRefresh={!supportsHistory} />

keyLength: number
作用：设置它里面路由的 location.key 的长度。默认是6。（key的作用：点击同一个链接时，每次该路由下的 location.key都会改变，可以通过 key 的变化来刷新页面。）
使用场景：按需设置。

<BrowserRouter keyLength={12} />

children: node
作用：渲染唯一子元素。
使用场景：作为一个 Reac t组件，天生自带 children 属性。
 */